<!--_meta 作为公共模版分离出去-->
{include file="public/meta" /}
<!--/meta 作为公共模版分离出去-->
<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="wap-container">
    <nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
        首页
        <span class="c-gray en">/</span>
        书籍管理
        <span class="c-gray en">/</span>
        审核
        <a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="Hui-admin-content clearfix">
        <div class="panel">
            <div class="panel-body">
                <form action="" method="post" class="form form-horizontal" id="form-add">
                    <input type="hidden" class="input-text" value="{$model['id']}" placeholder=""
                           name="id">
                    <div class="row clearfix">
                        <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>名称：</label>
                        <div class="form-controls col-xs-8 col-sm-9">
                            <input type="text" class="input-text" value="{$model.name}" placeholder="" name="name">
                        </div>
                    </div>
                    <div class="row clearfix">
                        <label class="form-label col-xs-4 col-sm-2">热度：</label>
                        <div class="form-controls col-xs-8 col-sm-9">
                            <input type="text" name="hot" value="{$model.hot}" class="input-text"
                                   style="width:40%">
                        </div>
                    </div>
                    <div class="row clearfix">
                        <label class="form-label col-xs-4 col-sm-2">价格：</label>
                        <div class="form-controls col-xs-8 col-sm-9">
                            <input type="text" name="price" value="{$model.price}" class="input-text"
                                   style="width:40%">
                        </div>
                    </div>
                    <div class="row clearfix">
                        <label class="form-label col-xs-4 col-sm-2">焦油量：</label>
                        <div class="form-controls col-xs-8 col-sm-9">
                            <input type="text" name="tar" value="{$model.tar}" class="input-text"
                                   style="width:40%">
                        </div>
                    </div>
                    <div class="row clearfix">
                        <label class="form-label col-xs-4 col-sm-2">尼古丁：</label>
                        <div class="form-controls col-xs-8 col-sm-9">
                            <input type="text" name="nicotine" value="{$model.nicotine}" class="input-text"
                                   style="width:40%">
                        </div>
                    </div>
                    <div class="row clearfix">
                        <label class="form-label col-xs-4 col-sm-2">一氧化碳量：</label>
                        <div class="form-controls col-xs-8 col-sm-9">
                            <input type="text" name="co" placeholder="" value="{$model.co}" class="input-text"
                                   style="width:40%">
                        </div>
                    </div>
                    <div class="row clearfix">
                        <label class="form-label col-xs-4 col-sm-2">分类：</label>
                        <div class="form-controls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
							<select class="select" name="category_id" size="1" id="category">
                                {volist name="category" id="vo"}
								<option value="{$vo.id}" {if condition="$model.category_id==$vo.id"}selected {/if}>{$vo.name}</option>
                                {/volist}
							</select>
							</span></div>
                    </div>
                    <div class="row clearfix">
                        <label class="form-label col-xs-4 col-sm-2">品牌：</label>
                        <div class="form-controls col-xs-8 col-sm-9"> <span class="select-box" style="width:150px;">
							<select class="select" name="brand_id" size="1" id="brand">
                                {volist name="brand" id="vo"}
								<option value="{$vo.id}" {if condition="$model.brand_id==$vo.id"}selected {/if}>{$vo.name}</option>
                                {/volist}
							</select>
							</span></div>
                    </div>
                    <div class="row clearfix">
                        <label class="form-label col-xs-4 col-sm-2">缩略图：</label>
                        <div class="form-controls col-xs-8 col-sm-9">
                            <span id="img-list-box">
                                 {if ($model.img)}
                            <div style="position: relative;margin-right: 20px;margin-bottom: 15px;width: 132px;display: inline-block;border: 1px solid #CCC;background:#EEE;">
                                <span style="display: block;width: 197px;height: 267px;border: 1px solid #F2F1F0;margin: 5px;overflow: hidden;">
                                    <img src="{$model.img}" style="width: 100%;"/>
                                </span>
                                <input type="hidden" name="img" value="{$model.img}"/>
                                    <a onclick="delImg(this);"
                                       style="z-index: 10;display: block;top: -8px;cursor:pointer;right: -8px;position:absolute;width: 20px;height: 20px;background: #CCC;border-radius:100%;text-align:center;line-height: 20px;border: 1px solid #C1C1C1;color: #555;">X</a>
                            </div>
                            {/if}
                            </span>
                            <span class="yibu_image">
        <a class="yibu_biaoqian">图片上传</a>
                                 <input type="file"
                                        class="yibu_input"

                                        id="up-img-file" onchange="upimg(this)">
     </span>
                        </div>
                    </div>
                    <div class="row clearfix">
                        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                            <button onClick="article_save_submit();" class="btn btn-primary radius" type="submit"><i
                                    class="Hui-iconfont">&#xe632;</i> 保存
                            </button>
                            <button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </article>
</div>
<!--_footer 作为公共模版分离出去-->
{include file="public/footer" /}
<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="{__STATIC_PATH}admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="{__STATIC_PATH}admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="{__STATIC_PATH}admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="{__STATIC_PATH}admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="{__STATIC_PATH}admin/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
<script type="text/javascript" src="{__STATIC_PATH}admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    function upimg(obj) {
        if (obj.value == "") {
            return;
        }
        var formdata = new FormData();
        //<input type="file" name="img" value="" />
        formdata.append("img", $(obj)[0].files[0]);//获取文件法二
        $.ajax({
            type: 'post',
            url: "image", //接口
            data: formdata,
            cache: false,
            processData: false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理
            contentType: false, // 不设置Content-type请求头
            success: function (response) {
                // console.log(response);
                var html = '<div style="position: relative;margin-right: 20px;margin-bottom: 15px;width: 132px;display: inline-block;border: 1px solid #CCC;background:#EEE;">'
                    + '<span style="display: block;width: 197px;height: 267px;border: 1px solid #F2F1F0;margin: 5px;overflow: hidden;">'
                    + '<img src="' + response + '" style="width: 100%;" />'
                    + '</span>'
                    + '<input type="hidden" name="img" value="' + response + '" />'
                    + '<a onclick="delImg(this);" style="z-index: 10;display: block;top: -8px;cursor:pointer;right: -8px;position:absolute;width: 20px;height: 20px;background: #CCC;border-radius:100%;text-align:center;line-height: 20px;border: 1px solid #C1C1C1;color: #555;">X</a>'
                    + '</div>';

                $('#img-list-box').html(html);
            },
            error: function () {
            }
        });
    }

    function delImg(obj) {
        $(obj).parent('div').remove();
    }
    function layer_close() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
    $(function () {
        var ue = UE.getEditor('articleEditor');
        /* 通过iCheck插件，美化checkbox */
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });
        // 表单提交验证
        $("#form-article-add").validate({
            onkeyup: false,
            focusCleanup: false,
            submitHandler: function (form) {
                $.ajax({
                    url: "edit",
                    type: "post",
                    data: $("form").serialize(),
                    success: function (res) {
                        if (res.code == 1) {
                            layer.msg(res.msg, {
                                icon: 1,
                                time: 1000 //2秒关闭（如果不配置，默认是3秒）
                            }, function () {
                                //do something
                                parent.location.replace(parent.location.href)
                                parent.layer.close(index);
                            });
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 1000});
                        }
                    }
                })
            }
        });
    });
    $(document).ready(function () {
        // 监听省份选择框的 change 事件
        $('#category').change(function () {
            // 获取用户选择的省份 ID
            var category_id = $(this).val();
            // 清空城市选择框的选项
            $('#brand').empty();
            // 添加默认选项
            $('#brand').append('<option value="">请选择品牌</option>');
            // 如果选择了省份
            if (category_id) {
                // 发起 AJAX 请求获取对应省份的城市数据
                $.ajax({
                    url: 'get_brand', // 替换为实际的后端 API 地址
                    method: 'GET',
                    data: { category_id: category_id }, // 传递省份 ID 到后端
                    dataType: 'json',
                    success: function (data) {
                        // 遍历后端返回的城市数据
                        $.each(data.result, function (index, city) {
                            // 将城市添加到城市选择框中
                            $('#brand').append('<option value="' + city.id + '">' + city.name + '</option>');
                        });
                    },
                    error: function () {
                        console.error('获取品牌数据失败');
                    }
                });
            }
        });
    });
</script>
</body>
</html>
